<template>
	<view calss="pad">
		<my-address v-if="cart.length!==0"></my-address>
		<view class="cart-list" v-if="cart.length!==0">
			<uni-swipe-action>
			  <block v-for="(item, i) in cart" :key="item.goods_id">
			    <!-- uni-swipe-action-item 可以为其子节点提供滑动操作的效果。需要通过 options 属性来指定操作按钮的配置信息 -->
			    <uni-swipe-action-item :right-options="options" @click="bindClick($event,item.goods_id)">
			      	<cart-item :goods="item" :key="item.goods_id"></cart-item>
			    </uni-swipe-action-item>
			  </block>
			</uni-swipe-action>
			<my-settle></my-settle>
		</view>
		<view class="empty-cart" v-else>
		    <image src="/static/cart_empty@2x.png" class="empty-img"></image>
		    <text class="tip-text">空空如也~</text>
		  </view>
	</view>
</template>

<script>
	import {mapState,mapGetters,mapMutations} from 'vuex'
	import tabbar from '@/mixins/tabbar-badge'
	export default {
		mixins:[tabbar],
		data() {
			return {
				 options: [{
				      text: '删除', 
				      style: {
				        backgroundColor: '#ff0000' 
				      }
				    }]
			};
		},
		onShow() {
		},
		computed:{
			...mapState('mcart',['cart'])
		},
		methods:{
			...mapMutations('mcart',['deleteGoods']),
			bindClick(e,goods_id){
				// e.index==0是删除选项 设置删除的处理函数
				if(e.index==0) return uni.showModal({
					content:'确认删除吗?',
					showCancel:true,
					success:(res)=> {
						console.log(res);
						if(res.cancel) return uni.$showMsg('您取消了删除')
						if(res.confirm) return this.deleteGoods(goods_id)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.cart-list {
		padding-bottom: 50px;
	}
.empty-cart {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 150px;

  .empty-img {
    width: 90px;
    height: 90px;
  }

  .tip-text {
    font-size: 12px;
    color: gray;
    margin-top: 15px;
  }
}
</style>
